<template>
	<div class="index rowBS">
		<div class="tree flex-1">
			<el-input v-model="filterText" placeholder="站点搜索" />
			<div class="tree-box">
				<el-tree :data="treeData" ref="treeRef" highlight-current node-key="id" show-checkbox
					:default-checked-keys="[1]" :filter-node-method="filterNode" :props="defaultProps"
					@node-click="handleNodeClick" @check-change="checkChange" />
			</div>
		</div>
		<div class="map">
			<div id="container"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
		watch,
		onMounted
	} from "vue"
	import {
		getStationList
	} from '@/api/RoadGate'
	import AMapLoader from '@amap/amap-jsapi-loader';
	import {
		useStore
	} from "vuex";

	const defaultProps = {
		children: 'children',
		label: 'site_name',
	}

	const filterText = ref<string>('')
	const treeRef = ref<InstanceType<typeof ElTree>>()
	const store = useStore()

	const treeData = ref<any>([])

	const tabList = reactive<any>([{
		name: '地图模式',
		key: 1
	},
	{
		name: '监控模式',
		key: 2
	},
	{
		name: '垃圾数据详情',
		key: 3
	},
	{
		name: '厢体状态详情',
		key: 4
	},
	{
		name: '车辆统计详情',
		key: 5
	},
	{
		name: '预警中心详情',
		key: 6
	},
	])

	onMounted(async () => {
		const res = await getStationList()
		console.log('treeData', res.data!.result)
		treeData.value = res.data!.result
		window.site = treeData.value[0].site_name
		store.commit('setRefresh')
		mapInit()
	})

	watch(filterText, (val) => {
		treeRef.value!.filter(val)
	})

	const filterNode = (value : string, data : Tree) => {
		console.log('data', data)
		console.log('value', value)
		if (!value) return true
		return data.site.includes(value)
	}

	let editCheckId = ''

	const handleNodeClick = (item, node, self) => {
		store.commit('setRefresh')
		window.site = item.site_name
		// console.log('站点信息', item)

		editCheckId = item.id; /*接收当前带你就的节点id  */
		treeRef.value.setCheckedKeys([item.id])
		if (item.longitude == 'null' || item.latitude == 'null') return
		aMap.setZoom(10)
		aMap.setCenter([Number(item.longitude), Number(item.latitude)])
	}

	const checkChange = (item, node, self) => {
		if (node == true) {
			editCheckId = item.id;
			treeRef.value.setCheckedKeys([item.id])
		} else {
			if (editCheckId == item.id) {
				treeRef.value.setCheckedKeys([item.id])
			}
		}
	}

	const clickMapHandler = (e) => {
		console.log(e)
	}

	let aMap = null
	let layer = null
	const mapInit = () => {
		AMapLoader.load({
			//注册开发者/创建应用，选择web端JS API（必须）
			key: 'a30b9e0565517d80486b8fbd824d4b62', //首次load必填
			version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			plugins: ['AMap.ToolBar', 'AMap.ControlBar', 'AMap.PlaceSearch'],  // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			AMapUI: {             // 是否加载 AMapUI，缺省不加载
				version: '1.1',   // AMapUI 版本
				plugins: ['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
			},
			Loca: {
				version: '2.0'  // Loca 版本
			},
		}).then((AMap) => {
			aMap = new AMap.Map('container', {
				zoom: 4,
				center: [107.4976, 32.1697],
				mapStyle: 'amap://styles/normal', //设置地图的显示样式
				features: ['bg', 'road', 'point', 'building'],
				// Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
				// viewMode: '3D'
			});

			let toolBar = new AMap.ToolBar({
				position: {
					bottom: '10px',
					right: '10px'
				}
			});
			let controlBar = new AMap.ControlBar({
				position: {
					top: '0px',
					right: '0px',
				},
			});
			aMap.addControl(toolBar);   // 添加右下角的放大缩小
			aMap.addControl(controlBar);   // 方向盘
			aMap.on('click', clickMapHandler) // 鼠标点击事件

			// console.log('aMap.value', aMap)
			treeData.value.forEach((c : any) => {
				// console.log('x', [Number(c.longitude), Number(c.latitude)])
				let marker = new AMapUI.SimpleMarker({
					iconLabel: {
						innerText: '',
						style: {
							fontSize: '16px',
							marginTop: '3px'
						}
					},
					//自定义图标地址
					iconStyle: {
						src: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
						style: {
							width: '25px',
							height: '35px'
						}
					},
					//设置基点偏移
					offset: new AMap.Pixel(-13, -40),
					map: aMap,
					showPositionPoint: true,
					position: [Number(c.longitude), Number(c.latitude)],
					zIndex: 100
				});

				marker.setTitle(c.site_name);
			})

			// // AMapUI使用
			// new AMapUI.SimpleMarker({
			// 	iconLabel: {
			// 		innerText: '1',
			// 		style: {
			// 			fontSize: '16px',
			// 			marginTop: '3px'
			// 		}
			// 	},
			// 	//自定义图标地址
			// 	iconStyle: {
			// 		src: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
			// 		style: {
			// 			width: '25px',
			// 			height: '35px'
			// 		}
			// 	},

			// 	//设置基点偏移
			// 	offset: new AMap.Pixel(-13, -40),

			// 	map: aMap,

			// 	showPositionPoint: true,
			// 	position: ['106.70546', '26.600055'],
			// 	zIndex: 100
			// });

			//Loca使用
			// layer = new Loca.PointLayer({
			// 	map: aMap.value
			// });

			// layer.setData(treeData, {
			// 	// 指定经纬度所在字段
			// 	lnglat: 'center'
			// });

			// layer.setOptions({
			// 	style: {
			// 		// 圆形半径，单位像素
			// 		radius: 5,
			// 		// 填充颜色
			// 		color: '#07E8E4',
			// 		// 描边颜色
			// 		borderColor: '#5DFBF9',
			// 		// 描边宽度，单位像素
			// 		borderWidth: 1,
			// 		// 透明度 [0-1]
			// 		opacity: 0.9,
			// 	}
			// });

			// layer.render();

		}).catch((e) => {
			console.error(e);
		});
	}
</script>

<style scoped lang="scss">
	.index {
		color: #ffffff;
		border: 0.1em solid #274d93;

		:deep(.el-tree) {
			background: none;
			--el-tree-node-hover-bg-color: #173f90;
			color: #bcbcbc;
			margin-left: -20px;
			font-size: 0.8em;

			.el-checkbox__inner {
				display: none;
			}

			--el-color-primary-light-9: #2362e1;

			.el-tree-node__content {
				height: auto;
			}

			.el-tree-node__label {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				width: 100%;
			}
		}

		.tree {
			// border: 1px solid #274d93;
			// border-radius: 6px;
			overflow: hidden;

			&-box {
				height: 26em;
				overflow-y: auto;
			}
		}

		.map {
			height: 27.65em;
			flex: 3;
		}

		:deep(.el-input__wrapper) {
			background-color: #133b8e;
			box-shadow: none;
			// margin: -10px 0 0;
			font-size: 1.3em;
			border-bottom: 0.1em solid #274d93;
			border-radius: 0;
			--el-input-text-color: #bcbcbc;
		}

		.amap-container {
			height: inherit;
		}
	}
</style>